<template lang="pug">
  .search-wrap 
    .top
      i.iconfont.icon-search
      input(placeholder='搜索')
      button(@click="cancle") 取消
    .cont 
      .cont-top 
        h3 热门搜索
        .his
          span 茶叶
          span 茶具
</template>

<script>
export default {
  name:"search",
  methods:{
    cancle(){
      this.$parent.flag = false;
    }
  },
 
}
</script>

<style scoped lang="scss">
.search-wrap {
  position: absolute;
  top:.88rem;
  left: 0;
  width: 100%;
  height: calc(100vh - .88rem);
  background:#363636 ;
  z-index: 99;
  .top {
    margin:0 .16rem .2rem;
    display: flex;
    position: relative;
    height: 0.72rem;
    i {
      position: absolute;
      top:50%;
      left:.16rem;
      transform: translateY(-50%);
      font-size:.34rem ;
      color:#7d7d81;
    }
    input {
      font-size: .32rem;
      background: #fff;
      flex-grow: 8;
      padding-left: .6rem;
      border-radius: .3rem;

    }
    button {
      flex-grow: 2;
      text-align: center;
      color: #fff;
    }
  }
  .cont {
    height: calc(100vh - .88rem - .36rem - .2rem);
    background: #f8f8f8;
    padding-top:.3rem;
    .cont-top {
      background: #fff;
      font-size:.22rem ;
      h3 {
        padding-left: .2rem;
        line-height: .56rem;
        border:1px solid #f6f6f6;
      }
      .his {
        padding:.2rem;
        span {
          display: inline-block;
          padding : .08rem .2rem;
          border:1px solid #f6f6f6;
          &+span {
            margin-left: .24rem;
          }
        }
      }
    }
  }
}
</style>